<template>
	<uni-popup class="popup-panel" ref="popupRef" type="center" :is-mask-click="false" border-radius="10px"
		background-color="#fff">
		<view class="content">
			<view class="close-btn" @click="handleClose()">
				<uni-icons type="closeempty" size="24"></uni-icons>
			</view>
			<view class="label">
				<image class="logo" :src="$imageUrl('/static/images/img-kefu.png')" mode="aspectFill"></image>
			</view>
			<view class="item-phone" style="padding:20rpx;" v-if="kefu && kefu.mobile">
				<view class="value">{{kefu.mobile}}</view>
				<view class="copy" @click="callPhone(kefu.mobile)">拨打</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		reactive,
		toRefs,
		inject,
		computed,
	} from 'vue';

	defineOptions({
		name: 'contact-kefu'
	});

	const props = defineProps({
		kefu: {
			type: Object,
			default: {}
		},
	})

	const popupRef = ref(null);

	// 打开
	function handleOpen() {
		popupRef.value.open();
	}

	// 关闭
	function handleClose() {
		popupRef.value.close();
	}

	defineExpose({
		open: handleOpen,
		close: handleClose
	});
	// 拨打电话
	function callPhone(phone) {
		// 判断是否为非空字符串
		if (typeof phone === 'string' && phone.length == 11) {
			uni.makePhoneCall({
				phoneNumber: phone, // 电话号码
				success: function() {
					console.log('拨打电话成功');
				},
				fail: function(err) {
					console.log('拨打电话失败：', err);
				}
			});
		} else {
			console.log('电话号码不合法');
		}
	}
</script>

<style lang="scss">
	.popup-panel {
		.content {
			width: 300rpx;
			background-color: #fff;
			padding: 0px;
			border-radius: 10px;

			.close-btn {
				// position: fixed;
				top: 10rpx;
				right: 10rpx;
			}

			.label {
				width: 160rpx;
				height: 160rpx;
				margin: 0 auto;

				.logo {
					width: 100%;
					height: 100%;
				}

			}

			.item-phone {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: $m8 0;

				.value {
					flex: 1;
					margin-right: $m12;
					font-size: $font-32;
					color: #303133;
					font-weight: 500;
				}

				.copy {
					font-size: $font-32;
					color: #e2472b;
				}
			}

			.item-time {
				align-items: center;
				padding: $m8 0;

				.value {
					margin-left: $m12;
					font-size: $font-32;
					color: #303133;
					font-weight: 500;
					text-align: center;
				}
			}
		}
	}
</style>